
{% extends 'base.html' %}
{% block title %}
网站首页
{% endblock %}



{% block styles %}
    {{ super() }}
    <style>
    	* {
			margin: 0;
			padding: 0;
		}
		/*清除列表样式 前面的小点点*/
		li {
			list-style: none;
		}
		.box {
			width: 1226px;
			height: 1600px;
			background-color: #ffffff;
			margin: auto;
		}

		.right {
			float: right;
			width: 1226px;
			{#height: 615px;#}
			background-color: #e4eae9;
		}
		.right li {
			float: left;
			width: 234px;
			height: 300px;
			background-color: #ffffff;
			margin-left: 11px;
			margin-bottom: 14px;
		}
        .right li img{
            width: 100%;
            height: 260px;

        }
        .right li p{
            width: 100%;
            height: 40px;
            {#水平居中#}
            text-align: center;
            {#垂直居中#}
            line-height: 40px;
        }
        .nav1{
            width: 1226px;
            height: 70px;
            font-size: 35px;
            {#text-align: center;#}
            line-height: 50px;
            background-color: #e4eae9;
            {#让盒子水平居中#}
            margin: 0 auto;
            color:black;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .right #btnshop{
            height: 35px;
            color: black;
            background-color: #ffffff;
            line-height: 35px;
            text-align: center;
            border: none;
        }
                .video{

			width: 1226px;
			{#height: 615px;#}
			background-color: #e4eae9;
             margin: 0 auto;
             display: flex;
  justify-content: center;
  align-items: center;
  {#height: 100vh;#}

        }
	</style>
{% endblock %}
{% block container%}


    <div class="nav1">Apple商店</div>
      <div class="video">
    <video width="800" height="450"  controls autoplay loop>
  <source src="../static/video/65abacda7339c1d007a0d0cebf8cfdea.mp4" type="video/mp4">
</video>
</div>
    <div class="box">
		<ul class="right">
            {%for product in products  %}
			<li>
                <img src="{{ url_for('static',filename=product.pimage) }}">
                <p>{{ product.pname }} {{ product.price }}￥
                    {% if user %}
                <input type="button" value="购买" onclick="shop('{{ product.pid }}')" id="btnshop">
{#                 <input type="button" value="详情" onclick="xq('{{ product.pid }}')">#}
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#aaModal{{ product.pid }}"> 详情  </button>
                    <div id="aaModal{{ product.pid }}" class="modal fade" tabindex="-1" role="dialog">
                     <div class="modal-dialog" role="document">
                     <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">商品详情</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">×</span>
                        </button>
                    </div>
      <div class="modal-body">
      <table width="400px">
        <tr>
            <td rowspan="5"><img src="{{ url_for('static',filename=product.pimage) }}"></td>
            <td>商品名称:{{ product.pname }}</td>
        </tr>
        <tr>
            <td>商品类型:{{ product.ptype }}</td>
        </tr>
        <tr>
            <td>商品单价:{{ product.price }}</td>
        </tr>
        <tr>
            <td>商品库存:{{ product.pnum }}</td>
        </tr>
        <tr>
            <td><input type="button" value="购买" onclick="shop('{{ product.pid }}')"></td>
        </tr>
    </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
                   {% else %}
                    <input type="button" onclick="buy1()" value="购买">
                   {% endif %}
                </p>
            </li>
            {% endfor %}
		</ul>
	</div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
    function shop(pid){
        location.href='/shopcar/shop_add?pid='+pid;
    }
    function xq(pid){
        location.href='/shopcar/pro_xq?pid='+pid;
    }
    function buy1(){
        //消息框
        alert('请先登录，才能购买！')
    }
    </script>
{% endblock %}
